<template>
	<div class="container" v-if="businessDetailDialog">
		<el-dialog title="变量详情" :visible.sync="businessDetailDialog" width="500px;" :before-close="handleClose" :destroy-on-close="true" append-to-body>
			<el-form :model="form" :rules="rules" ref="addVariableRef" label-width="100px" class="demo-ruleForm" label-position="left">
				<el-form-item label="脱敏配置" prop="">
					<el-switch v-model="form.showSwitch" disabled> </el-switch>
				</el-form-item>
				<div v-if="form.showSwitch" class="desensitization-box">
					<el-form-item label="脱敏配置模式" prop="desensConfigMode" class="pattern">
						<el-select v-model="form.desensConfigMode" placeholder="请选择脱敏模式" style="width: 95%" disabled> </el-select>
					</el-form-item>
					<el-form-item label="AI播报话术脱敏规则" :required="true">
						<el-select v-model="form.speechCheck" placeholder="" style="width: 95%" disabled> </el-select>
					</el-form-item>

					<el-form-item label="访客端字幕&聊天记录脱敏规则" :required="true" class="guest-subtitle-label">
						<el-select v-model="form.chatmsgCheck" placeholder="" style="width: 95%" disabled> </el-select>
					</el-form-item>
					<el-form-item label="录像文件字幕脱敏规则" :required="true">
						<el-select v-model="form.subtitleCheck" placeholder="" style="width: 95%" disabled> </el-select>
					</el-form-item>
				</div>

				<el-form-item label="变量名" prop="variableName" :class="isShowErrorText ? 'errorText-label' : ''" style="margin-top: 16px">
					<el-input v-model="form.variableName" placeholder="例如：年龄" maxlength="20" :class="isShowErrorText ? 'borderErr' : ''" style="width: 95%" disabled></el-input>
				</el-form-item>
				<el-form-item label="初始化方式" prop="initializationMode">
					<el-select v-model="form.initializationMode" placeholder="" style="width: 95%" @change="onChangeApi" disabled>
						<el-option v-for="item in initModeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<template v-if="initMode !== 'non-init'">
					<el-form-item label="初始化字段" prop="initializeField" v-if="isShowField">
						<el-input v-model="form.initializeField" placeholder="" style="width: 95%" disabled></el-input>
					</el-form-item>
				</template>
				<template v-if="initMode === 'api-data'">
					<el-form-item label="URL地址" prop="urlAddress">
						<el-input v-model="form.urlAddress" placeholder="请输入URL地址" id="urlAddress" class="input-textOverFlow" disabled> </el-input>
					</el-form-item>
					<el-form-item label="调用方式" prop="callMode">
						<el-select v-model="form.callMode" placeholder="" style="width: 95%" @change="onChangeMode" disabled>
							<el-option v-for="item in callModeOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<template v-if="form.callMode === 'post'">
						<el-form-item label="传参变量" prop="" v-if="form.transferParameterVariable && form.transferParameterVariable.length > 0">
							<el-select v-model="form.transferParameterVariable" placeholder="请选择传参的变量" style="width: 95%" multiple value-key="describe" disabled>
								<el-option v-for="item in transferParameterVariableOption" :label="item.name" :key="item.id" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</template>
				</template>

				<el-form-item label="变量类型" prop="type">
					<el-select v-model="form.type" placeholder="" style="width: 95%" disabled>
						<el-option label="文本/字符串" value="text"></el-option>
						<el-option label="数值" value="numeric"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { getCustomerVariablesDetails, getAllRole, getCustomerVariablesByRole, getBusinessVariables } from '@/api/api.js';
export default {
	name: '',
	components: {},
	props: {
		businessDetailDialog: {
			required: true,
			type: Boolean,
			default: () => false
		},
		variableDetailsData: {
			type: Object,
			default: () => {}
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		},
		isShowErrorText: {
			required: true,
			type: Boolean,
			default: () => false
		},
		variableDetailSwitch: {
			required: true,
			type: Boolean,
			default: () => false
		},
		busDetailsId: {
			type: Number,
			default: () => 0,
			required: true
		},
		scenarioId: {
			type: Number,
			default: () => 0,
			required: true
		}
	},
	data() {
		return {
			form: {
				variableName: '', //变量名
				describe: '', //变量描述
				initializationMode: 'user-data', //初始化方式
				type: 'text', //变量类型
				urlAddress: '', //URL地址
				callMode: 'get', //调用方式
				transferParameterVariable: [], //传参变量
				desensConfigMode: '', //脱敏配置模式
				//AI播报话术脱敏规则
				speechRadio: '不脱敏', //AI播报话术脱敏规则单选
				speechCheck: '不脱敏', //AI播报话术脱敏规则  复选框
				//录像文件字幕脱敏规则
				subtitleRadio: '不脱敏',
				subtitleCheck: '不脱敏',
				// 访客端字幕&聊天记录脱敏规则
				chatmsgRadio: '不脱敏',
				chatmsgCheck: '不脱敏',
				activeSwitch: false,
				disabledSelest: true, // 初始化进来默认禁用，不脱敏
				initializeField: ''
			},
			variableName: '',
			describe: '',
			initModeOption: [
				{ label: '随路数据', value: 'user-data' },
				{ label: '非初始化', value: 'non-init' },
				{ label: 'API获取', value: 'api-data' }
			],
			callModeOption: [
				{ label: 'get方法', value: 'get' },
				{ label: 'post方法', value: 'post' }
			],
			transferParameterVariableOption: [], // 传参变量option下拉框列表
			pageData: {
				page: 1,
				pageSize: 100,
				total: 0
			},
			isShowApi: false,
			isShowTransferVariable: false,
			showSwitch: false,
			selectCheck: [],
			checkboxList: [
				{ label: '脱敏地址区', value: 'address' },
				{ label: '脱敏生日区', value: 'birthday' },
				{ label: '脱敏生日月日区', value: 'monthDay' },
				{ label: '脱敏顺序号', value: 'sequenceNumber' }
			],
			desensitizationOption: [
				{ label: '姓名', value: 'userName' },
				{ label: '身份证号', value: 'idCard' },
				{ label: '手机号', value: 'phoneNumber' },
				{ label: '家庭地址', value: 'homeAddress' }
			],
			userNameOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留首字', value: 1 },
				{ label: '保留末字', value: 2 },
				{ label: '首末各留一字', value: 3 }
			],
			rulesOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 15 }
			],
			idCardCheck: [
				{ label: '脱敏地址区', value: 1, id: 1, checked: false },
				{ label: '脱敏生日区', value: 4, id: 2, checked: false },
				{ label: '脱敏生日月日区', value: 8, id: 3, checked: false },
				{ label: '脱敏顺序号', value: 2, id: 4, checked: false }
			],
			mobileOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留前三位', value: 1 },
				{ label: '保留后四位', value: 2 },
				{ label: '脱敏中间四位', value: 3 }
			],
			addressOption: [
				{ label: '不脱敏', value: 0 },
				{ label: '全脱敏', value: 4 },
				{ label: '保留首字', value: 1 },
				{ label: '保留末字', value: 2 },
				{ label: '首末各留一字', value: 3 }
			],
			isShowField: true,
			roleData: [],
			activeName: 'customer',
			activeTag: 1,
			scenId: JSON.parse(sessionStorage.getItem('sceneData'))?.id || this.$route.params.scenId,
			businessData: [],
			initMode: ''
		};
	},
	mounted() {
		this.initVariableDetails();
	},
	methods: {
		handleClose() {
			this.$emit('closeBusinessDetail');
		},

		onChangeApi() {
			console.log(this.form.initializationMode);
			if (this.form.initializationMode === 'api-data') {
				this.isShowApi = true;
				// this.initVariablesList();
				if (this.form.callMode === 'post') {
					this.isShowTransferVariable = true;
				} else {
					this.isShowTransferVariable = false;
				}
			} else {
				this.isShowApi = false;
				this.isShowTransferVariable = false;
			}
		},
		onChangeMode() {
			if (this.form.callMode === 'post') {
				this.isShowTransferVariable = true;
			} else {
				this.isShowTransferVariable = false;
			}
		},
		initVariableDetails() {
			getCustomerVariablesDetails(this.scenarioId, this.busDetailsId)
				.then(res => {
					const { name, type, initMode, dataMasking, isDefault, method, url, params, linkedKey } = res.data.data;
					console.log('isDefault:', dataMasking, isDefault);
					this.form.variableName = name;
					this.form.initializationMode = initMode;
					this.form.type = type;
					this.form.urlAddress = url;
					this.form.callMode = method;
					console.log(params, 'params');
					if (params) {
						this.form.transferParameterVariable = params.map(item => {
							// console.log(item);
							if (item.roleId && item.roleName) {
								return `客户信息-${item.roleName}-${item.name}`;
							}
							return `业务信息-${item.name}`;
						});
					}
					if (linkedKey) {
						this.form.initializeField = linkedKey;
					} else {
						this.isShowField = false;
					}
					// 脱敏配置 数据回显
					if (dataMasking && dataMasking.applyTo) {
						this.form.showSwitch = dataMasking.enabled;
						this.form.desensConfigMode = this.getdesensConfigType(dataMasking.type);
						this.form.speechCheck = this.getDetailSpeech(dataMasking.type, dataMasking.applyTo.speech);
						this.form.chatmsgCheck = this.getDetailChatmsg(dataMasking.type, dataMasking.applyTo.chatmsg);
						this.form.subtitleCheck = this.getDetailSubtitle(dataMasking.type, dataMasking.applyTo.subtitle);
					}
					this.initMode = initMode;
					console.warn(this.form, 'form');
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取变量详情失败！');
				});
		},
		initAllRole() {
			getAllRole(this.scenId)
				.then(res => {
					this.roleData = res.data.data;
					this.activeTag = res.data.data[0]?.id;
					if (this.activeTag) {
						this.initcustomerData(this.activeTag);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 客户信息变量配置初始化
		initcustomerData(id) {
			let data = {
				scenId: this.scenId,
				roleId: id || this.activeTag,
				pageSize: 100000,
				page: 1
			};
			getCustomerVariablesByRole(data)
				.then(res => {
					console.log(res.data.data, 'initcustomerData');
					this.transferParameterVariableOption = res.data.data.data.map(item => {
						return {
							id: item.id,
							name: item.name,
							roleId: item.roleId,
							dataMasking: item.dataMasking,
							params: item.params,
							url: item.url,
							method: item.method,
							linkedKey: item.linkedKey,
							isDefault: item.isDefault,
							roleName: item.bizscenario_role.name
						};
					});
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取客户信息变量列表失败！');
				});
		},
		// 客户信息变量配置初始化
		initBusinessData() {
			getBusinessVariables({ scenId: this.scenId, page: 1, pageSize: 1000 })
				.then(res => {
					console.log(res.data.data, 'initBusinessData');
					this.businessData = res.data.data.data;
				})
				.catch(err => {
					console.log(err);
					this.$message.error('获取客户信息变量列表失败！');
				});
		},
		checkRole(id) {
			this.activeTag = id;
			this.initcustomerData(this.activeTag);
		},
		// 脱敏配置模式  详情数据回显
		getdesensConfigType(value) {
			let result = '';
			switch (value) {
				case 'userName':
					result = '姓名';
					break;
				case 'idCard':
					result = '身份证号';
					break;
				case 'phoneNumber':
					result = '手机号';
					break;
				case 'homeAddress':
					result = '家庭地址';
					break;
				default:
					result = '';
					break;
			}
			return result;
		},
		getDetailSpeech(type, value) {
			console.warn(type, value, 'getDetailSpeech');
			let result = '';
			if (type === 'userName') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'idCard') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 15:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					case 1:
						result = '脱敏地址区';
						break;
					case 2:
						result = '脱敏顺序号';
						break;
					case 4:
						result = '脱敏生日区';
						break;
					case 8:
						result = '脱敏生日月日区';
						break;
					case 3:
						result = '脱敏地址区 脱敏顺序号';
						break;
					case 9:
						result = '脱敏地址区 脱敏生日月日区';
						break;
					case 13:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区';
						break;
					case 5:
						result = '脱敏地址区 脱敏生日区';
						break;
					case 6:
						result = '脱敏顺序号 脱敏生日区';
						break;
					case 10:
						result = '脱敏顺序号 脱敏生日月日区';
						break;
					case 12:
						result = '脱敏生日区 脱敏生日月日区';
						break;
					case 14:
						result = '脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'phoneNumber') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留前三位';
						break;
					case 2:
						result = '保留后四位';
						break;
					case 3:
						result = '脱敏中间四位';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'homeAddress') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			}
			console.log('speechCheck:', result);
			console.log(type, value);
			return result;
		},
		getDetailSubtitle(type, value) {
			let result = '';
			if (type === 'userName') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'idCard') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 15:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					case 1:
						result = '脱敏地址区';
						break;
					case 2:
						result = '脱敏顺序号';
						break;
					case 4:
						result = '脱敏生日区';
						break;
					case 8:
						result = '脱敏生日月日区';
						break;
					case 3:
						result = '脱敏地址区 脱敏顺序号';
						break;
					case 9:
						result = '脱敏地址区 脱敏生日月日区';
						break;
					case 13:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区';
						break;
					case 5:
						result = '脱敏地址区 脱敏生日区';
						break;
					case 6:
						result = '脱敏顺序号 脱敏生日区';
						break;
					case 10:
						result = '脱敏顺序号 脱敏生日月日区';
						break;
					case 12:
						result = '脱敏生日区 脱敏生日月日区';
						break;
					case 14:
						result = '脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'phoneNumber') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留前三位';
						break;
					case 2:
						result = '保留后四位';
						break;
					case 3:
						result = '脱敏中间四位';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'homeAddress') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			}
			console.log('speechCheck:', result);
			console.log(this.form);
			return result;
		},
		getDetailChatmsg(type, value) {
			let result = '';
			if (type === 'userName') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'idCard') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 15:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					case 1:
						result = '脱敏地址区';
						break;
					case 2:
						result = '脱敏顺序号';
						break;
					case 4:
						result = '脱敏生日区';
						break;
					case 8:
						result = '脱敏生日月日区';
						break;
					case 3:
						result = '脱敏地址区 脱敏顺序号';
						break;
					case 9:
						result = '脱敏地址区 脱敏生日月日区';
						break;
					case 13:
						result = '脱敏地址区 脱敏生日区 脱敏生日月日区';
						break;
					case 5:
						result = '脱敏地址区 脱敏生日区';
						break;
					case 6:
						result = '脱敏顺序号 脱敏生日区';
						break;
					case 10:
						result = '脱敏顺序号 脱敏生日月日区';
						break;
					case 12:
						result = '脱敏生日区 脱敏生日月日区';
						break;
					case 14:
						result = '脱敏生日区 脱敏生日月日区 脱敏顺序号';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'phoneNumber') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留前三位';
						break;
					case 2:
						result = '保留后四位';
						break;
					case 3:
						result = '脱敏中间四位';
						break;
					default:
						result = '';
						break;
				}
				return result;
			} else if (type === 'homeAddress') {
				switch (value) {
					case 0:
						result = '不脱敏';
						break;
					case 4:
						result = '全脱敏';
						break;
					case 1:
						result = '保留首字';
						break;
					case 2:
						result = '保留末字';
						break;
					case 3:
						result = '首末各留一字';
						break;
					default:
						result = '';
						break;
				}
				return result;
			}
			console.log('speechCheck:', result);
			console.log(this.form);
			return result;
		}
	}
};
</script>

<style scoped lang="less">
.btns {
	background: #6384fe;
}

.error-text {
	color: #ef5753;
	// margin: -19px 0 0 120px;
	// width: 200px;
	position: absolute;
	top: 28px;
	left: 0;
}

.desensitization-box {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	.pattern {
		padding-top: 12px;
	}
}
/* .line {
	height: 2px;
	background: #eee;
	width: 96%;
	display: block;
	margin-left: 10px;
} */
</style>
<style lang="less">
.borderErr {
	.el-input__inner {
		border-color: #f56c6c !important;
	}
}

.errorText-label .el-form-item__error {
	display: none;
}

.transfer-select .el-input__inner {
	height: none !important;
}

// 多余内容在失焦时....展示
.input-textOverFlow .el-input__inner {
	width: 95%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.desensitization-box .el-form-item__label {
	padding: 8px 0 0 13px;
	line-height: normal;
}
.guest-subtitle-label .el-form-item__label {
	width: 100px;
}
</style>
